<template>
  <div class="course-statistics">
    <a-table
      :columns="columns"
      :dataSource="courseData"
      :pagination="{ pageSize: 5 }"
    >
      <template #score="text">
        <a-progress :percent="text" :stroke-color="getColor(text)" />
      </template>
      <template #action="record">
        <a-button type="link" @click="showDetail(record)">详情</a-button>
      </template>
    </a-table>

    <a-drawer
      :title="`课程评价详情`"
      width="720"
      :visible="visible"
      @close="onClose"
    >
      <div v-if="currentCourse" class="course-detail">
        <a-descriptions bordered>
          <a-descriptions-item label="课程编号">{{ currentCourse.id }}</a-descriptions-item>
          <a-descriptions-item label="授课教师">{{ currentCourse.teacher }}</a-descriptions-item>
          <a-descriptions-item label="开课学期">{{ currentCourse.semester }}</a-descriptions-item>
        </a-descriptions>

        <a-divider orientation="left">评价分布</a-divider>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-card title="学生评价分布" size="small">
              <div class="chart-container">
                <div class="chart-item">
                  <h4>优秀 (90-100分)</h4>
                  <a-progress :percent="45" status="active" />
                </div>
                <div class="chart-item">
                  <h4>良好 (80-89分)</h4>
                  <a-progress :percent="35" status="active" />
                </div>
                <div class="chart-item">
                  <h4>中等 (70-79分)</h4>
                  <a-progress :percent="15" status="active" />
                </div>
                <div class="chart-item">
                  <h4>及格 (60-69分)</h4>
                  <a-progress :percent="5" status="active" />
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '课程编号', dataIndex: 'id', key: 'id', width: 100 },
        { title: '课程名称', dataIndex: 'name', key: 'name' },
        { title: '授课教师', dataIndex: 'teacher', key: 'teacher' },
        { title: '学生评价', dataIndex: 'studentScore', key: 'studentScore', scopedSlots: { customRender: 'score' } },
        { title: '综合评分', dataIndex: 'totalScore', key: 'totalScore', scopedSlots: { customRender: 'score' } },
        { title: '操作', key: 'action', width: 100, scopedSlots: { customRender: 'action' } }
      ],
      courseData: [
        {
          id: 'C2001',
          name: '数据结构',
          teacher: '王芳',
          semester: '2024-2024-1',
          studentScore: 88,
          totalScore: 85
        },
      ],
      visible: false,
      currentCourse: null
    }
  },
  methods: {
    getColor(score) {
      if (score >= 90) return '#52c41a';
      if (score >= 80) return '#1890ff';
      if (score >= 70) return '#faad14';
      return '#f5222d'
    },
    showDetail(record) {
      this.currentCourse = record
      this.visible = true
    },
    onClose() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.course-detail {
  padding: 10px;
}
.chart-container {
  margin-top: 15px;
}
.chart-item {
  margin-bottom: 15px;
}
.chart-item h4 {
  margin-bottom: 5px;
}
</style>